<template>
  <div>
    <el-table :data="tableData" height="73vh" ref="table">
      <el-table-column type="selection" width="40" />
      <!-- <el-table-column type="index" :index="indexMethod" /> -->
      <el-table-column label="井深" prop=Depth />
      <el-table-column label="井斜角" prop=Incln />
      <el-table-column label="方位角" prop=Azimuth />
      <el-table-column label="工具面角" prop=ToolFaceAngle />
      <el-table-column label="井斜角变化率" prop=InclnRate />
      <el-table-column label="方位角变化率" prop=AzimuthRate />
      <el-table-column label="狗腿度，全角变化率" prop=DLS />
      <el-table-column fixed="right" label="操作" width="80">
        <template #default>
          <el-button style="color: red;" type="text" size="small">删除</el-button> </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="true" :total="holeList.length" layout="total, prev, pager, next,sizes" :pager-count="3"
      v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" @current-change="getList"
      @size-change="handlesizechange" />
    <div style="margin-top: 10px; display:  flex; justify-content: center; align-items: center;">
      <el-button class="mt-4" type="success" style="width: 120px">添加</el-button>
      <el-button class="mt-4" type="info" style="width: 120px">插入</el-button>
      <el-popconfirm width="320" confirm-button-text="是的" cancel-button-text="不，谢谢" :icon="InfoFilled"
        icon-color="#626AEF" title="确定要删除这些数据吗">
        <template #reference>
          <el-button class="mt-4" type="danger" style="width: 120px" @click="handleDe">删除</el-button>
        </template>
      </el-popconfirm>
      <el-upload :action="'javascript:void(0)'" :before-upload="() => false" @change="uploadExcel"
        style="margin-top: 10px ; margin-left: 10px;">
        <el-button style="width: 120px" type="primary">导入</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventbus.js";
import { holeList } from "@/utils/holeDemo.js"
import { read, utils } from 'xlsx'
const tableData = ref()
const queryParams = ref({
  pageSize: 20,
  pageNum: 1
})
const uploadExcel = (files) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = read(data, { type: 'array' });
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    const json = utils.sheet_to_json(worksheet, { header: 1 });
    // console.log(json); // 输出 json 数组，查看是否正确获取到了表格数据
    // 对 Excel 表格中的数据进行格式转换
    const tableRows = json.slice(1).map(item => ({
      Depth: item[0] === undefined ? '' : item[0],
      Incln: item[4] === undefined ? '' : item[4],
      Azimuth: item[5] === undefined ? '' : item[5],
      ToolFaceAngle: item[6] === undefined ? '' : item[6],
      InclnRate: item[7] === undefined ? '' : item[7],
      AzimuthRate: item[8] === undefined ? '' : item[8],
      DLS: item[9] === undefined ? '' : item[9],
    }))
    saveJSON(tableRows, "hole")
    tableData.value = tableRows;
  }

  reader.readAsArrayBuffer(files.raw);
};

const handleScroll = () => {
  const tableRef = $refs.table.$el;
  const scrollDistance = tableRef.scrollHeight - tableRef.clientHeight - tableRef.scrollTop;

  if (scrollDistance <= 10) {
    // Perform your scroll loading logic here
    // 加载更多数据的逻辑代码放在这里
  }
};

const drawXAxisData = ref({
  start: undefined,
  end: undefined,
  step: undefined,
});

function saveJSON(data, filename) {
  if (!data) {
    alert("保存的数据为空");
    return;
  }
  if (!filename) filename = "json.json";
  if (typeof data === "object") {
    data = JSON.stringify(data, undefined, 4);
  }

  var blob = new Blob([data], { type: "text/json" }),
    e = document.createEvent("MouseEvents"),
    a = document.createElement("a");
  a.download = filename;
  a.href = window.URL.createObjectURL(blob);
  a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
  e.initMouseEvent(
    "click",
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  );
  a.dispatchEvent(e);
}
getList()
function handlesizechange(e) {
  queryParams.pageSize = e
  getList()
}
function getList() {
  tableData.value = holeList.slice((queryParams.value.pageNum - 1) * queryParams.value.pageSize, queryParams.value.pageSize * queryParams.value.pageNum)
  console.log(queryParams.value.pageNum)
}
function handleDe() {
}
function handleChartClick() {
  emitter.emit("handleChartClick", drawXAxisData.value);
}
</script>

<style scoped></style>
